<script setup>
import { defineExpose, defineProps, ref } from 'vue'

const props = defineProps({
  index: Boolean,
  selection: Boolean,
  tableHeader: Array,
  attrs: Object,
})

const tableRef = ref(null)

function clearSelection() {
  tableRef.value.clearSelection()
}

defineExpose({
  clearSelection,
})
</script>

<template>
  <el-table ref="tableRef" v-bind="attrs" :show-overflow-tooltip>
    <!-- 序号 -->
    <el-table-column v-if="index" type="index" width="55" />
    <!-- 多选 -->
    <el-table-column v-if="selection" type="selection" width="55" />
    <el-table-column
      v-for="column in tableHeader"
      :key="column.id"
      :sortable="column.sort"
      v-bind="column"
    >
      <template #default="scope">
        <slot
          v-if="$slots[column.prop]"
          :name="column.prop"
          v-bind="scope"
          :index="scope.$index"
          :prop="column.prop"
        />
        <span v-else>
          {{
            scope.row[column.prop] || scope.row[column.prop] === 0
              ? scope.row[column.prop]
              : '--'
          }}
        </span>
      </template>
    </el-table-column>
    <!-- el-table内置插槽 -->
    <template v-for="(_, name) in $slots" :key="name" #[name]="ops">
      <slot :name="name" v-bind="ops || {}" />
    </template>
  </el-table>
</template>

<style scoped></style>
